import React, { useState } from 'react';
import { Button as TaroButton } from '@tarojs/components';
import { ButtonProps as TaroButtonProps } from '@tarojs/components/types/Button';
import { THEME_COLORS } from '../../constants/index';
import './index.less';

type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';

interface ButtonProps extends Omit<TaroButtonProps, 'size' | 'type'> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  fullWidth?: boolean;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  fullWidth = false,
  className = '',
  children,
  disabled,
  onTouchStart,
  onTouchEnd,
  ...props
}) => {
  // 用于模拟hover效果的状态
  const [isPressed, setIsPressed] = useState(false);

  const baseClasses = 'dshx-button';

  const variantClasses = {
    primary: 'dshx-button--primary',
    secondary: 'dshx-button--secondary',
    outline: 'dshx-button--outline',
    ghost: 'dshx-button--ghost',
    danger: 'dshx-button--danger'
  };

  const sizeClasses = {
    sm: 'dshx-button--sm',
    md: 'dshx-button--md',
    lg: 'dshx-button--lg',
    xl: 'dshx-button--xl'
  };

  const widthClass = fullWidth ? 'dshx-button--full-width' : '';
  const pressedClass = isPressed ? 'dshx-button--pressed' : '';

  const getButtonStyle = () => {
    const style: React.CSSProperties = {};

    // 基础样式
    if (variant === 'primary') {
      style.backgroundColor = isPressed ? THEME_COLORS.primaryDark : THEME_COLORS.primary;
      style.borderColor = isPressed ? THEME_COLORS.primaryDark : THEME_COLORS.primary;
    } else if (variant === 'danger') {
      style.backgroundColor = isPressed ? '#dc2626' : THEME_COLORS.error;
      style.borderColor = isPressed ? '#dc2626' : THEME_COLORS.error;
    } else if (variant === 'secondary') {
      style.backgroundColor = isPressed ? '#e5e7eb' : '#f3f4f6';
      style.borderColor = isPressed ? '#e5e7eb' : '#f3f4f6';
    } else if (variant === 'outline') {
      style.backgroundColor = isPressed ? '#f9fafb' : 'transparent';
      style.borderColor = '#d1d5db';
    } else if (variant === 'ghost') {
      style.backgroundColor = isPressed ? '#f3f4f6' : 'transparent';
      style.borderColor = 'transparent';
    }

    // 按压时的阴影效果（模拟深度变化）
    if (isPressed && (variant === 'primary' || variant === 'danger')) {
      style.boxShadow = '0 1px 2px 0 rgba(0, 0, 0, 0.1)';
    } else if (!isPressed && (variant === 'primary' || variant === 'danger')) {
      style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
    }

    return style;
  };

  const handleTouchStart = (e) => {
    if (!disabled && !loading) {
      setIsPressed(true);
    }
    onTouchStart?.(e);
  };

  const handleTouchEnd = (e) => {
    if (!disabled && !loading) {
      setIsPressed(false);
    }
    onTouchEnd?.(e);
  };

  const buttonClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClass} ${pressedClass} ${className}`;

  return (
    <TaroButton
      className={buttonClasses}
      style={getButtonStyle()}
      disabled={disabled || loading}
      loading={loading}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      {...props}
    >
      {/* TODO: 小程序环境下loading状态由TaroButton内置处理，无法自定义loading图标的SVG动画 */}
      {/* TODO: 小程序环境下无法使用CSS :focus伪类选择器，需要通过onFocus/onBlur事件处理焦点状态 */}
      {/* TODO: 小程序环境下无法使用CSS :hover伪类选择器，已通过触摸事件模拟hover效果 */}
      {children}
    </TaroButton>
  );
};

export default Button;
